<template>
    <div class="_paircardcontent">
        <canvas class="paircardcanvas"> </canvas>
        <button class="paircardstart" @click="paircardstart()">START</button>
    </div>
</template>

<script setup>
class paircardcanvasanimotion {
    cardw = 0
    cardh = 0
    fontsize = '18'
    interval = null
    canvas = null;
    ctx = null;
    cards = [] //卡片数组
    pair = [] //配对数组
    save = [] //翻开卡片的索引
    constructor() {
        this.canvas = document.querySelector(".paircardcanvas")
        this.ctx = this.canvas.getContext("2d")
        let tempRect = document.querySelector('._paircardcontent').getBoundingClientRect()

        if (tempRect.height < 200)
            document.querySelector('._paircardcontent').style = 'height:500px !important;';
        this.canvas.width = tempRect.width;
        this.canvas.height = tempRect.height < 200 ? 500 : tempRect.height;
        this.cardw = Math.floor(this.canvas.width / 10)
        this.cardh = Math.floor(this.canvas.height / 10)
        let that = this
        this.canvas.addEventListener("click", function (evt) { //获取点击事件
            let cRect = that.canvas.getBoundingClientRect()
            let canvasX = Math.round(evt.clientX - cRect.left)
            let canvasY = Math.round(evt.clientY - cRect.top)
            let x = parseInt(canvasX / that.cardw)
            let y = parseInt(canvasY / that.cardh)
            let origin = x * 10 + y //根据点击位置计算卡片索引
            if (!that.cards[origin].turn) { //如果卡片状态为未翻开状态
                that.cards[origin].turn = !that.cards[origin].turn //切换索引卡片翻转状态
                that.pair.push(that.cards[origin].value) //将翻开的卡片值写入pair数组
                that.save.push(origin) //将翻开的卡片索引写入save 数组
                if (that.pair.length >= 2) { //当翻开两张时
                    console.log(that.pair);
                    if (that.pair[0] != that.pair[1]) { //判断两张卡片值是否相等
                        setTimeout(function () { //如不相等，延迟0.5秒后将翻开的卡片翻转回未翻开状态
                            for (var i = 0; i < that.save.length; i++) {
                                that.cards[that.save[i]].turn = !that.cards[that.save[i]].turn
                            }
                            that.save = [] //清空save及pair
                            that.pair = []
                        }, 200)
                    }
                    else { //如两张卡片值相等，则保持翻转状态，仅清空save及pair数组
                        that.save = []
                        that.pair = []
                    }
                }
            }

        })
    }

    paircardnewgame() {
        var rnd = [] //空数组用于填充卡面
        for (var i = 0; i < 100; i++) {
            rnd.push(i % 10) //分别填入0~9各10个值
        }
        var idx = 0 //索引
        this.cards = [] //清空卡片数组
        for (var i = 0; i < 10; i++) {
            for (var j = 0; j < 10; j++) {
                idx = parseInt(Math.random() * rnd.length) //获取随机索引值
                this.cards.push({
                    value: rnd[idx], //写入卡片值
                    turn: false, //标记卡片为未翻开
                    x: i, //写入卡片横坐标
                    y: j //写入卡片纵坐标
                })
                rnd.splice(idx, 1) //删掉已经写入卡面的索引对应的数字
            }
        }

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) //清空画布
        this.ctx.fillStyle = "white" //填充文字为黑色


        this.interval = setInterval(() => {
            this.paircarddraw()
        }, 1);
    }
    paircarddraw() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) //清空画布
        this.ctx.font = this.fontsize + "px sans-serif" //设定文字属性
        for (var i = 0; i < this.cards.length; i++) { //遍历卡片数组
            let card = this.cards[i]

            this.ctx.fillStyle = "white" //默认填充白色
            if (!card.turn) { //如卡片为翻开状态，则填充为黑色
                this.ctx.fillStyle = "black"
            }
            this.ctx.fillRect(this.cardw * card.x + 1, this.cardh * card.y + 1, (this.cardw - 2), (this.cardh - 2)) //绘制卡片
            this.ctx.fillStyle = "black" //填充文字为黑色
            this.ctx.fillText(card.value, this.cardw * card.x + (this.cardw / 2 - this.fontsize / 2), this.cardh * card.y + (this.cardh / 2 + this.fontsize / 2)) //将文字值写入卡片位置
        }
    }

}

let paircardstart = () => {
    let paircard = new paircardcanvasanimotion()
    paircard.paircardnewgame()
    document.querySelector('.paircardstart').style.display = "none"
    this.canvas.style.cursor = "none"
}


</script>

<style lang="scss" scoped>
._paircardcontent {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    background: #333;
    position: relative;
    .paircardcanvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid white;
        box-shadow: 0 0 1vw white, inset 0 0 1vw white;
    }
    .paircardstart {
        position: absolute;
        width: 120px;
        height: 40px;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 28px;
        padding: 5px;
        border-radius: 4px;
        display: flex;
        background: rgba(255, 255, 255, 0.4);
        justify-content: center;
    }
}
</style>